<template>
  <div id="register">
    <div id="register-form">
      <h1>注册</h1>
      <label for="username"><i class="el-icon-user-solid" style="color: #c1c1c1" /></label>
      <input
        id="username"
        ref="username"
        v-model.trim="registerForm.username"
        type="text"
        placeholder="用户名"
        autocapitalize="off"
        @blur="checkUsername"
      >
      <p style="visibility: hidden" />
      <label for="password"><i class="el-icon-right" style="color: #c1c1c1" /></label>
      <input
        id="password"
        v-model.trim="registerForm.password"
        type="password"
        placeholder="密码"
        autocapitalize="off"
        @blur="checkPassword"
      >
      <p style="visibility: hidden" />
      <label for="phone"><i class="el-icon-right" style="color: #c1c1c1" /></label>
      <input
        id="phone"
        v-model.trim="registerForm.phone"
        type="text"
        placeholder="手机号"
        autocapitalize="off"
        @blur="checkPhone"
      >
      <p style="visibility: hidden" />
      <div>
        <el-button :loading="loading" type="primary" @click="handleRegister()">确认注册</el-button>
        <el-button type="primary" @click="handleLogin">返回登录</el-button>
        <el-button type="primary" @click="togglePasswordVisibility">显示密码</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { register } from '@/api/user'

export default {
  name: 'Register',
  data: function() {
    return {
      registerForm: {
        username: '',
        password: '',
        phone: ''
      },
      passwordVisible: false,
      loading: false,
      redirect: undefined
    }
  },
  methods: {
    handlereset() {
      this.registerForm.username = ''
      this.registerForm.password = ''
      this.registerForm.phone = ''
    },
    checkUsername() {
      if (this.registerForm?.username?.trim() === '') {
        this.$message.error('用户名不能为空')
      }
    },
    checkPassword() {
      if (this.registerForm?.password?.trim() === '') {
        this.$message.error('密码不能为空')
      }
    },
    checkPhone() {
      if (this.registerForm?.phone?.trim() === '') {
        this.$message.error('手机号不能为空')
      }
    },
    handleRegister() {
      this.loading = true
      register(this.registerForm).then(() => {
        this.$message.success('注册成功')
        this.loading = false
        this.$router.push({ path: '/login' })
      }).catch(response => {
        this.$message.error(response.msg)
        this.loading = false
      })
    },
    handleLogin() {
      this.$router.push({ path: '/login' })
    },
    togglePasswordVisibility() {
      this.passwordVisible = !this.passwordVisible
      const passwordInput = document.getElementById('password')
      passwordInput.type = this.passwordVisible ? 'text' : 'password'
    }
  }
}

</script>

<style lang="scss" scoped>
#register {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  // 背景图片样式
  background-image: url("../../assets/image/2.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;

}

#register-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  min-width: 300px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  // background-color: lightblue;
  background-color: transparent;
  border-radius: 15px;
  // 表单 box-shadow 样式
  box-shadow: 0 15px 25px rgba(0, 0, 0, .5);
}

h1 {
  width: 60%;
  margin: 50px auto 0;
  color: #fff;
  text-align: center;
  font-family: 	STSong;
}

input {
  width: 60%;
  margin: 0 auto;
  // 注意 border outline 默认值
  outline: none;
  border: none;
  padding: 10px;
  border-bottom: 1px solid #fff;
  background: transparent;
  color: white;
}

label {
  width: 60%;
  margin: 0 auto;
  position: relative;
  top: 30px;
  left: -15px;
}

div {
  width: 60%;
  margin: 10px auto;
  display: flex;
  justify-content: center;
  align-content: center;
}

button {
  // rgba
  background-color: rgba(9, 108, 144, 0.5);
  margin: 10px 25px 40px 25px;
}

p {
  width: 60%;
  margin: 8px auto;
  position: relative;
  left: -15px;
  color: #ff0000;
  font-size: 8px;
}

input {
  -webkit-text-fill-color: #ffffff !important;
  transition: background-color 5000s ease-in-out, width 1s ease-out !important;
}
</style>
